<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化 */
        * {
            margin: 0;
        }

        img {
            vertical-align: top;
        }


        /* 让底下的子元素进行继承 */
        /* html {
            font-size: 12px;
            color: #595959;
            line-height: 24px;
        } */
        body {
            font-size: 12px;
            color: #595959;
            line-height: 24px;
        }

        .a {
            width: 1100px;
            height: 65px;
            margin: auto;
            background-color: #e0e0e0;
        }

        .a1 {
            width: 170px;
            height: 39px;
            float: left;
            background-color: #f00;
            margin-left: 49px;
            margin-top: 16px;
        }

        .a2 {
            width: 496px;
            height: 65px;
            float: right;
            background-color: #eee;
        }

        .a2 p {
            float: left;
            margin-right: 43px;
            font-size: 14px;
            margin-top: 17px;
            line-height: 48px;
        }

        .c {
            width: 1100px;
            height: 288px;
            margin: auto;
            background-color: #ddd;
        }

        .c1 {
            width: 560px;
            height: 288px;
            float: left;
            background-color: #ff0;
        }

        .c2 {
            width: 540px;
            height: 288px;
            float: left;
            background-color: #0f0;
        }

        .c h3 {
            width: 121px;
            height: 50px;
            background-color: aqua;
            margin-left: 50px;
            color: #fff;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
        }

        .c2 h3 {
            margin-left: 0;
            width: 90px;
        }

        .c1-1 {
            height: 118px;
            background-color: #f90;
            margin-left: 50px;
        }

        .c1-1 h4 {
            width: 123px;
            float: left;
            height: 30px;
            line-height: 30px;
            background-color: #666;
            color: #fff;

        }

        .c1-1 p {
            width: 340px;
            float: left;
            background-color: #eee;
        }

        .c2-1 {
            margin-top: 20px;
        }

        .c2-1 img {
            /* 换行产生的左右间距可以通过浮动解决 */
            float: left;
            margin-right: 6px;
        }

        .d {
            width: 1100px;
            height: 324px;
            margin: auto;
            /* background-color: #f00; */
            margin-top: 59px;
        }

        .d1 {
            width: 352px;
            height: 324px;
            float: left;
            background-color: bisque;
        }

        .d2 {
            width: 300px;
            height: 324px;
            float: left;
            /* background-color: rgb(116, 73, 22); */
        }

        .d3 {
            width: 406px;
            height: 324px;
            float: left;
            background-color: bisque;
        }

        .d h3 {
            height: 38px;
            line-height: 38px;
            /* background-color: #666; */

        }

        .d1 h3 {
            margin-left: 52px;
        }

        .d2 h3 {
            margin-left: 52px;
        }

        .d3 h3 {
            margin-left: 20px;
        }

        .d h4 {
            height: 14px;
            line-height: 14px;
            text-align: right;
            margin-right: 10px;
            margin-bottom: 13px;
        }

        .d p {
            margin-left: 52px;
            line-height: 22px;
        }

        .d1-p {
            margin-top: 20px;
            width: 252px;
        }

        .d2 img {
            width: 246px;
            height: 63px;
            margin-left: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .d2 p {
            line-height: 24px;
            margin-left: 30px;
        }

        .d2 p span {
            margin-right: 30px;
        }

        .d3 p {
            line-height: 30px;
            margin-left: 20px;
        }

        .d3 span {
            float: right;
            margin-right: 18px;
        }

        .e {
            width: 1100px;
            height: 50px;
            background-color: rgb(67, 202, 30);
            margin: auto;
        }

        .e1 {
            width: 50px;
            height: 50px;
            background-color: #000;
            margin-left: 52px;
            float: left;
        }

        .e2 {
            width: 645px;
            height: 50px;
            float: right;
            background-color: #eee;
            margin-right: 52px;
        }

        .e2-1 {
            width: 210px;
            height: 50px;
            float: left;
            background-color: #ddd;
        }

        .e2-1-1 {
            width: 108px;
            height: 34px;
            margin-top: 8px;
            background-color: #ff0;
            line-height: 34px;
            float: left;
        }

        .e2-1-2 {
            width: 84px;
            height: 34px;
            margin-top: 8px;
            background-color: #ff0;
            float: left;
            line-height: 17px;
        }

        .e2-1-1 img {
            margin-left: 13px;
            margin-top: 7px;
        }

        .ee {
            width: 220px;
        }
    </style>
</head>

<body>

    <!-- 
        整体构建网页
            字体大小12px 
            文字的颜色  #595959
            行高   24px  
     -->

    <div class="a">
        <h1 class="a1"></h1>
        <div class="a2">
            <p>啊啊啊啊</p>
            <p>啊啊啊啊</p>
            <p>啊啊啊啊</p>
            <p>啊啊啊啊</p>
            <p>啊啊啊啊</p>
        </div>
    </div>


    <div class="c">
        <div class="c1">
            <h3>SERVICES</h3>
            <div class="c1-1">
                <h4>简约套餐</h4>
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </div>
            <div class="c1-1">
                <h4>简约套餐</h4>
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </div>
        </div>
        <div class="c2">
            <h3>CASE</h3>
            <div class="c2-1">
                <img src="../images/gotoway_03.jpg" alt="">
                <img src="../images/gotoway_03.jpg" alt="">
                <img src="../images/gotoway_03.jpg" alt="">
            </div>
        </div>
    </div>

    <div class="d">
        <div class="d1">
            <h3>关于我们</h3>
            <h4>MORE+</h4>
            <p>众人真没啊</p>
            <p>众人真没啊</p>
            <p>众人真没啊</p>
            <p class="d1-p">众人真没啊众人真没啊众人真没啊众人真没啊众人真没啊众人真没啊众人真没啊</p>
        </div>
        <div class="d2">
            <h3>关于我们</h3>
            <h4>MORE+</h4>
            <img src="../images/gotoway_03.jpg" alt="">
            <p>w呜呜呜呜</p>
            <p>
                <span>是是是</span>
                <span>啊啊啊啊啊</span>
            </p>
            <p>w呜呜呜呜</p>
        </div>
        <div class="d3">
            <h3>关于我们</h3>
            <h4>MORE+</h4>
            <p>众人真没啊 <span>2-22-02-02</span></p>
            <p>众人真没啊 <span>2-22-02-02</span></p>
            <p>众人真没啊 <span>2-22-02-02</span></p>
            <p>众人真没啊 <span>2-22-02-02</span></p>
            <p>众人真没啊 <span>2-22-02-02</span></p>
            <p>众人真没啊 <span>2-22-02-02</span></p>
        </div>
    </div>


    <div class="e">
        <div class="e1"></div>
        <div class="e2">
            <div class="e2-1">
                <div class="e2-1-1">
                    <img src="../images/gotoway_04.jpg" alt="">
                    <span>网站架设</span>
                </div>
                <div class="e2-1-2">
                    <p>少时诵诗书</p>
                    <p>少时诵诗书</p>
                </div>
            </div>
            <div class="e2-1 ee">
                <div class="e2-1-1">
                    <img src="../images/gotoway_04.jpg" alt="">
                    <span>网站架设</span>
                </div>
                <div class="e2-1-2">
                    <p>少时诵诗书</p>
                    <p>少时诵诗书</p>
                </div>
            </div>
            <div class="e2-1">
                <div class="e2-1-1">
                    <img src="../images/gotoway_04.jpg" alt="">
                    <span>网站架设</span>
                </div>
                <div class="e2-1-2">
                    <p>少时诵诗书</p>
                    <p>少时诵诗书</p>
                </div>
            </div>
        </div>
    </div>

</body>

</html>